<template>
  <el-dialog
    :before-close="handleClose"
    title="创建转发器"
    :visible.sync="dialogVisible"
  >
    <el-form
      ref="forwarder"
      v-loading="loading"
      label-width="100px"
      :model="forwarder"
      :rules="rules"
      size="mini"
    >
      <div class="flex">
        <el-form-item
          label="转发器名称"
          prop="forwarder_name"
          style="width: 50%;"
        >
          <el-input
            v-model="forwarder.forwarder_name"
            placeholder="请输入名称"
            spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="初始状态" prop="forwarder_enabled">
          <el-switch v-model="forwarder.forwarder_enabled" />
          <!-- @change="handleBlockChange($event, forwarder)"> -->
        </el-form-item>
      </div>
      <el-form-item label="转发器描述" prop="forwarder_info">
        <el-input
          v-model="forwarder.forwarder_info"
          placeholder="请输入内容"
          type="textarea"
        />
      </el-form-item>
      <div class="flex">
        <el-form-item
          v-permission="['super', 'org']"
          label="转发器类型"
          prop="name"
          style="width: 50%;"
        >
          <el-select
            v-model="forwarder.name"
            filterable
            @change="changeArrIndex"
          >
            <el-option
              v-for="(item, index) in forwarder.name_list"
              :key="index"
              :label="`${item}`"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-permission="['super', 'org']"
          label="事件类型"
          prop="event"
          style="width: 50%;"
        >
          <el-select v-model="forwarder.event" filterable>
            <el-option
              v-for="(item, index) in forwarder.event_list"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>

      <div v-if="forwarder.name == 'syslog'">
        <el-form-item
          v-permission="['super', 'org']"
          label="类型"
          prop="type"
          style="width: 50%;"
        >
          <el-select v-model="forwarder.type" filterable>
            <el-option
              v-for="(item, index) in forwarder.type_list"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-permission="['super', 'org']"
          label="协议"
          prop="proto"
          style="width: 50%;"
        >
          <el-select v-model="forwarder.proto" filterable>
            <el-option
              v-for="(item, index) in forwarder.proto_list"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务器" prop="server" style="width: 50%;">
          <el-input
            v-model="forwarder.server"
            placeholder="请输入服务器"
            spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input-number v-model="forwarder.port" type="number" />
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item
          v-permission="['super', 'org']"
          label="v1"
          prop="v1"
          style="width: 50%;"
        >
          <el-input
            v-model="forwarder.v1"
            placeholder="请输入"
            spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="v2" prop="v2" style="width: 50%;">
          <el-select v-model="forwarder.v2" filterable>
            <el-option
              v-for="(item, index) in forwarder.v2_list"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-permission="['super', 'org']"
          label="v3"
          prop="v3"
          style="width: 50%;"
        >
          <el-input
            v-model="forwarder.v3"
            placeholder="请输入"
            spellcheck="false"
          />
        </el-form-item>
      </div>
      <el-form-item class="submit">
        <el-button type="primary" @click="submit('forwarder')">保存</el-button>
        <el-button @click="dialogVisible = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { forwarderCreate } from "@/api/setting/forwarder.js";
import clearWatch from "@/utils/mixin/clearWatch";
export default {
  name: "CreateForwarder",
  mixins: [clearWatch],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      orgList: [],
      org_id: 0,
      forwarder: {
        forwarder_name: "",
        forwarder_enabled: false,
        forwarder_info: "",
        name: "",
        name_list: [],
        type: "",
        type_list: [],
        event: "",
        event_list: [],
        proto: "",
        proto_list: [],
        server: "",
        port: 0,
        v1: "",
        v2: "",
        v2_list: [],
        v3: ""
      },
      forwarder_list: [],
      rules: {
        // name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  mounted() {
    // console.log(111);
    // this.getForwarderTypeList().then(() => {
    //   this.changeArrIndex(this.forwarder.name);
    // });
  },
  methods: {
    handleClose(done) {
      done();
    },
    show(data, id) {
      console.log(data);
      this.org_id = id;
      this.dialogVisible = !this.dialogVisible;
      this.getForwarderTypeList(data);
    },
    changeArrIndex(type) {
      console.log("type", type);
      this.forwarder_list.forEach(item => {
        if (item.name === type) {
          this.forwarder.forwarder_name = item.name || null;
          this.forwarder.proto_list = item.proto?.value_list || null;
          this.forwarder.event_list = item.event?.value_list || null;
          this.forwarder.type_list = item.type?.value_list || null;
          // this.forwarder.v1 = item.v1 ? "" : null;
          this.forwarder.v2_list = item.v2?.value_list || null;
          // this.forwarder.v3 = item.v3 ? "" : null;
        }
      });
      // ?展示不确定要不要去除null
      for (const key in this.forwarder) {
        if (this.forwarder[key] === null) {
          delete this.forwarder[key];
        }
      }
      console.log("here", this.forwarder);
    },
    getForwarderTypeList(data) {
      console.log(data.type);
      const names = [];
      data.type.forEach((item, index) => {
        if (index == 0) {
          this.forwarder.name = item.name;
          this.forwarder.event_list = item.event.value_list;
        }
        this.forwarder_list.push(item);
        names.push(item.name);
        console.log("this.forwarder_list", this.forwarder_list);
      });
      this.forwarder.name_list = names;
      this.changeArrIndex(this.forwarder.name);
    },
    submit(forwarder) {
      this.$refs[forwarder].validate(valid => {
        if (valid) {
          // 创建新的数据对象
          const data = {
            forwarder_name: this.forwarder.forwarder_name, // 使用 forwarder_name 代替 name
            forwarder_enabled: true, // 设置 forwarder_enabled 为 true
            forwarder_info: this.forwarder.forwarder_info, // 使用 forwarder_info 代替 info
            forwarder_config: {}, // 初始化 forwarder_config 为空对象
            org_id: this.org_id // 设置 org_id 为 this.search.orgid
          };

          // 将除了 name 和 info 之外的属性放入 forwarder_config
          for (let prop in this.forwarder) {
            if (
              prop !== "forwarder_name" &&
              prop !== "forwarder_info" &&
              prop !== "forwarder_enabled" &&
              !Array.isArray(this.forwarder[prop]) // 检查属性值是否为数组
            ) {
              data.forwarder_config[prop] = this.forwarder[prop];
            }
          }

          // 删除 v1、v2、v3 等属性
          if (data.forwarder_name === "test") {
            delete data.forwarder_config.proto;
            delete data.forwarder_config.serve;
            delete data.forwarder_config.type;
            delete data.forwarder_config.port;
          } else {
            delete data.forwarder_config.v1;
            delete data.forwarder_config.v2;
            delete data.forwarder_config.v3;
          }

          console.log("TIJIAO", data);
          forwarderCreate(data).then(res => {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.$emit("change");
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.submit {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -50px;

  .el-button {
    margin: 0 10px; /* 可以根据需要调整按钮之间的间距 */
  }
}
</style>
